<style scoped>
	.goods_font {
		height: 32px;
		line-height: 32px;
	}
	
	.goods_right {
		float: right;
		margin-right: 20px;
	}
</style>

<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
				<Breadcrumb-item href="#">首页</Breadcrumb-item>
				<Breadcrumb-item href="#">入库单管理</Breadcrumb-item>
				<Breadcrumb-item>入库单新增</Breadcrumb-item>
			</Breadcrumb>
		</div>
		<div class="layout-content">
			<div class="layout-content-main">
				<Row>
					<Col span="2" class="goods_font"><span class="goods_right">编码</span></Col>
					<Col span="22">
					<Input v-model="controlNo" placeholder="请输入编码" style="width: 300px"></Input>
					</Col>
				</Row>
				<br>
				<Row>
					<Col span="2" class="goods_font"><span class="goods_right">商品</span></Col>
					<Col span="22">
					<Select v-model="goodsId" style="width:300px">
						<Option v-for="item in goodsList" :value="item.id" :key="item.id">{{ item.value }}</Option>
					</Select>
					</Col>
				</Row>
				<br>
				<Row>
					<Col span="2" class="goods_font"><span class="goods_right">供应商</span></Col>
					<Col span="22">
					<Select v-model="supplierId" style="width:300px">
						<Option v-for="item in supplierList" :value="item.id" :key="item.id">{{ item.value }}</Option>
					</Select>
					</Col>
				</Row>
				<br>
				<Row>
					<Col span="2" class="goods_font"><span class="goods_right">数量</span></Col>
					<Col span="22">
					<Input v-model="stock" placeholder="请输入商品数量" style="width: 300px"></Input>
					</Col>
				</Row>
				<br>
				<Row>
					<Col span="7">
					<div class="f-r">
						<Button @click="cancel">取 消</Button>&nbsp;
						<Button type="primary" @click="insert">保 存</Button>
					</div>
					</Col>
					<Col span="20">
					</Col>
				</Row>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				controlNo: '',
				goodsId: '',
				goodsList: '',
				supplierId: '',
				supplierList: '',
				stock: ''
			}
		},
		beforeMount() {
			this.getGoodsList();
			this.getSupplierList();
		},
		watch: {
			stock: function(val) {
				let _that = this;
				if(isNaN(val)) {
					this.$Message.error({
						content: '请输入数字',
						onClose: function() {
							_that.stock = ''
						}
					});
				}
			}
		},
		methods: {
			getGoodsList() {
				let _that = this;
				this.$tldJsonp({
					isLayer: false,
					url: this.$domain + "/tld/pub/common/getGoodsSelectVo.json",
					params: {},
					successFc: (response) => {
						_that.goodsList = response.data.data
					}
				})
			},
			getSupplierList() {
				let _that = this;
				this.$tldJsonp({
					isLayer: false,
					url: this.$domain + "/tld/pub/common/getSupplierSelectVo.json",
					params: {},
					successFc: (response) => {
						_that.supplierList = response.data.data
					}
				})
			},
			cancel() {
				this.$router.push({
					path: '/tld/index/stockIn'
				});
			},
			insert() {
				let _that = this;
				this.$tldJsonp({
					isLayer: true,
					url: this.$domain + "/tld/admin/stockin/insert.json",
					params: {
						userId: window.localStorage["userId"],
						controlNo: _that.controlNo,
						goodsId: _that.goodsId,
						supplierId: _that.supplierId,
						stock: _that.stock
					},
					successFc: (response) => {
						this.$Message.success({
							content: '保存成功',
							onClose: function() {
								_that.$router.push({
									path: '/tld/index/stockIn'
								});
							}
						});
					}
				})
			}
		}
	}
</script>